<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>体验websocket</title>
  <style>
    #contanier {
      width: 500px;
      height: 400px;
      border: 2px dashed #7575e7;
      overflow-y: auto;
    }
  </style>
</head>

<body>
  <div id="contanier"></div>
  <!-- 1  建立连接 (拨号) -->
  <!-- 2  发消息 接消息 -->
  <!-- 3  关闭连接 -->
  <input type="text" id="message" />
  <button id="btn1">建立连接</button>
  <button id="btn2">发送消息</button>
  <button id="btn3">关闭连接</button>

  <script>
    var dom = document.getElementById('contanier')
    var inputDom = document.getElementById('message')
    var btn1 = document.getElementById('btn1')
    var btn2 = document.getElementById('btn2')
    var btn3 = document.getElementById('btn3')

    let ws;
    btn1.onclick = function () {
      // 与服务器建立链接
      // new WebSocket构造函数  实例对象 
      // const ws = new WebSocket("服务器地址")

      ws = new WebSocket("wss://echo.websocket.org")
      console.log(ws);

      // 当客户端与服务器链接成功的时候，会触发open事件
      ws.onopen = function () {
        console.log("链接成功");

        dom.innerHTML += '<p>与服务器链接成功</p>'
      }

      // 当服务器给客户端响应消息的时候会触发message事件
      ws.onmessage = function (e) {
        // console.log(e); // 形参e的data就是服务器响应的消息
        dom.innerHTML += `<p>服务器说：${e.data}</p>`
      }

      // 当客户端与服务器断开链接的时候会触发close 事件
      ws.onclose = function () {
        console.log("断开了链接");
        dom.innerHTML += '<p>与服务器断开链接</p>'
      }

      // 链接失败
      ws.onerror = function () {
        console.log("链接失败");
      }
    }

    btn2.onclick = function () {
      const content = inputDom.value.trim();
      if (content.length === 0) {
        return;
      }

      // 有内容，发送给服务器 通过WebSocket的实例对象的send方法来发送消息
      ws.send(content)
      dom.innerHTML += `<p>我说：${content}</p>`
    }

    btn3.onclick = function () {
      // 关闭链接 通过WebSocket的实例对象的close方法来实现
      ws.close()
    }

    // 浏览器支持 WebSocket 
    //  1. 链接服务器  let ws = new WebSocket(服务器地址)
    //  2. 链接成功会触发 open 事件  ws.onopen = function(){}
    //  3. 服务器给客户端发送消息 会触发 message 事件  ws.onmessage = function(){}
    //  4. 客户端与服务器端开了链接 会触发  close 事件 ws.onclose = function(){}

    // 方法
    //  客户端发送消息给服务器  ws.send(消息)
    //  客户端主动和服务器断开链接  ws.close()
  </script>
</body>

</html>